<template>
  <div>
    <el-button @click="handleDetail" type="text" size="small">详情</el-button>
    <el-dialog :append-to-body="true" :visible.sync="dialog" :title="'网关详情'" width="500px">
    <div class>
        <el-row class="bb pb10">
          <el-col :span="8">
            <em>网关数 {{gateways_data.equipments?gateways_data.equipments.length:0}}</em>
          </el-col>
          <el-col :span="12" class="pcub-te fz16 bold" v-text="gateways_data.name">新空开连接</el-col>
          <el-col :span="4" class="tx-c"></el-col>
        </el-row>
        <div v-if="command_gateways.name">
          <div class="mtb10 tx-r">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link c-main pointer">
                {{command_gateways.name}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  :command="it"
                  v-for="(it, index) in gateways_data.equipments"
                  :key="index"
                  v-text="it.name"
                ></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div v-loading="loading" class="bb">
           <datas :id="command_gateways.id"></datas>
          </div>
        </div>
        <div v-else style="color:red;">暂无设备</div>
        <div class="fz14 mt20">
          <p class="mt10">
            <span>组织机构:</span>
            <em v-text="gateways_data.organizationName"></em>
          </p>
          <!-- <p class="mt10">
            <span>区域:</span>
            <em v-text="gateways_data.address"></em>
          </p> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { _gatewaysShow, _equipmentShow } from "@/http/ajax";
import datas from "@/view/equipment/modul/datas";
export default {
  name: "detail",
  components: { datas },
  props: {
    gat_id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      gateways_data: {},
      command_gateways: { name: "" },
      cur_equipment_current: {},
    };
  },
  created() {},
  methods: {
    handleCommand(item) {
      this.command_gateways = item;
      this.getEquipmentShow();
    },
     // 获取网guan详情
    handleDetail(data) {
      _gatewaysShow(
        this.gat_id,
        res => {
          this.dialog = true;
          this.gateways_data = res;
          if (this.gateways_data.equipments.length > 0) {
            this.command_gateways = this.gateways_data.equipments[0];
            this.getEquipmentShow(); 
          }
        },
        err => {}
      );
    },
    // 获取设备详情
    getEquipmentShow() {
      this.loading = true;
      console.log( this.command_gateways.id)
      _equipmentShow(
        this.command_gateways.id,
        res => {
          this.cur_equipment_current = res.current;
          setTimeout(() => {
            this.loading = false;
          }, 800);
        },
        err => {}
      );
    }
  }
};
</script>

<style lang="scss"></style>
